<template>
  <div class="dayd">
    <div class="query">
      <el-form
        label-position="right"
        label-width="80px"
        :model="formLabelAlign"
      >
        <el-form-item
          label="证件号码:"
          style="display: inline-block; width: 33%; padding-right: 20px"
        >
          <el-input v-model="formLabelAlign.name" size="small"></el-input>
        </el-form-item>
        <el-form-item
          label="责任医生:"
          style="display: inline-block; width: 33%; padding-right: 20px"
        >
          <el-select
            v-model="formLabelAlign.type"
            filterable
            clearable
            placeholder="请选择责任医生"
            size="small"
            style="width: 100%"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="现住址:"
          style="display: inline-block; width: 33%; padding-right: 20px"
        >
          <el-select
            v-model="formLabelAlign.type"
            filterable
            clearable
            placeholder="请选择现住址"
            size="small"
            style="width: 100%"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="人群分类:"
          style="display: inline-block; width: 100%; padding-right: 20px"
        >
          <el-checkbox-group v-model="formLabelAlign.region">
            <el-checkbox label="冠心病">冠心病</el-checkbox>
            <el-checkbox label="慢阻肺">慢阻肺</el-checkbox>
            <el-checkbox label="高血压">高血压</el-checkbox>
            <el-checkbox label="糖尿病">糖尿病</el-checkbox>
            <el-checkbox label="脑卒中">脑卒中</el-checkbox>
            <el-checkbox label="慢性肾脏病">慢性肾脏病</el-checkbox>
            <el-checkbox label="肿瘤">肿瘤</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div style="text-align: right">
        <el-button size="small" type="primary" icon="el-icon-search"
          >搜索</el-button
        >
        <el-button size="small" plain icon="el-icon-refresh-right"
          >重置</el-button
        >
      </div>
    </div>
    <div class="main">
      <p style="text-align: right">
        <el-button
          size="small"
          type="primary"
          @click="(drawer = true), (title = '批量更换责任医生')"
          >批量更换责任医生</el-button
        >
        <el-button
          size="small"
          type="primary"
          @click="(drawer = true), (title = '批量转档')"
          >批量转档</el-button
        >
      </p>
      <el-table
        :data="tableData"
        style="width: 100%; margin-top: 15px"
        :header-cell-style="{
          color: '#000',
          backgroundColor: 'rgb(222,234,255)',
        }"
        height="460"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="name" label="姓名"> </el-table-column>
        <el-table-column prop="six" label="性别"> </el-table-column>
        <el-table-column prop="age" label="年龄"> </el-table-column>
        <el-table-column prop="bordy" label="出生日期"> </el-table-column>
        <el-table-column prop="idcarde" label="证件号码"> </el-table-column>
        <el-table-column prop="jdDate" label="建档时间"> </el-table-column>
        <el-table-column prop="date" label="人群分类" width="220">
          <template>
            <el-tag type="success" size="small">普</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="ys1" label="现地址"> </el-table-column>
        <el-table-column prop="ys1" label="来源"> </el-table-column>
        <el-table-column prop="ys" label="责任医生"> </el-table-column>
        <el-table-column prop="sc" label="档案状态"> </el-table-column>
      </el-table>
      <div style="text-align: right; margin-top: 20px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage3"
          :page-size="100"
          layout="prev, pager, next, jumper"
          :total="1000"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 弹层 -->
    <el-drawer
      :visible.sync="drawer"
      direction="rtl"
      :before-close="handleClose"
      :append-to-body="true"
    >
      <div style="padding: 20px" v-if="title == '批量更换责任医生'">
        <p
          style="
            font-weight: 900;
            font-size: 18px;
            text-align: center;
            padding-bottom: 20px;
            border-bottom: 1px solid gray;
          "
        >
          {{ title }}
        </p>
        <p style="margin: 10px 0">已选中1个居民</p>
        <p style="margin: 10px 0">请选择责任医生更换为:</p>
        <el-select
          v-model="formLabelAlign.type"
          filterable
          clearable
          placeholder="请选择责任医生更换为"
          size="small"
          style="width: 100%"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <p style="margin: 30px 0; text-align: center">
          <el-button
            plain
            size="small"
            style="
              background-color: #fff;
              color: #333;
              border: 1px solid #333;
              width: 200px;
            "
            >提 交</el-button
          >
        </p>
      </div>
      <div style="padding: 20px" v-if="title == '批量转档'">
        <p
          style="
            font-weight: 900;
            font-size: 18px;
            text-align: center;
            padding-bottom: 20px;
            border-bottom: 1px solid gray;
          "
        >
          {{ title }}
        </p>
        <p style="margin: 10px 0">已选中1个居民</p>
        <p style="margin: 10px 0">请选择档案接收单位:</p>
        <el-select
          v-model="formLabelAlign.type"
          filterable
          clearable
          placeholder="请选择档案接收单位"
          size="small"
          style="width: 100%"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <p style="margin: 10px 0">请选择责任医生:</p>
        <el-select
          v-model="formLabelAlign.type"
          filterable
          clearable
          placeholder="请选择责任医生"
          size="small"
          style="width: 100%"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <p style="margin: 10px 0">请输入转档原因:</p>
        <el-input
          type="textarea"
          :rows="4"
          placeholder="请输入转档原因"
          v-model="textarea"
        >
        </el-input>
        <p style="margin: 30px 0; text-align: center">
          <el-button
            plain
            size="small"
            style="
              background-color: #fff;
              color: #333;
              border: 1px solid #333;
              width: 200px;
            "
            >提 交</el-button
          >
        </p>
      </div>
    </el-drawer>
  </div>
</template>
  
  <script>
export default {
  data() {
    return {
      formLabelAlign: {
        name: "",
        region: [],
        type: "",
      },
      options: [
        {
          value: "测试",
          label: "测试",
        },
      ],
      tableData: [
        {
          name: "王洛勇",
          six: "男",
          age: "46",
          bordy: "1988-10-11",
          idcarde: "532186358415661",
          jdDate: "2021-5-16",
          ys: "熊有庆",
          sc: "正常",
        },
        {
          name: "张云龙",
          six: "男",
          age: "46",
          bordy: "1988-10-11",
          idcarde: "532186358415661",
          jdDate: "2021-5-16",
          ys: "熊有庆",
          sc: "正常",
        },
        {
          name: "李文文",
          six: "女",
          age: "46",
          bordy: "1988-10-11",
          idcarde: "532186358415661",
          jdDate: "2021-5-16",
          ys: "熊有庆",
          sc: "正常",
        },
        {
          name: "张雨生",
          six: "男",
          age: "46",
          bordy: "1988-10-11",
          idcarde: "532186358415661",
          jdDate: "2021-5-16",
          ys: "熊有庆",
          sc: "正常",
        },
      ],
      drawer: false,
      title: "",
    };
  },
  methods: {
    handleClose() {
      this.drawer = false;
    },
  },
};
</script>
  
  <style scoped lang="scss">
.dayd {
  padding: 20px;
  background-color: #fff;
  .query {
    border-bottom: 1px solid #ccc;
    padding-bottom: 20px;
    margin-bottom: 10px;
  }
}
::v-deep .el-drawer__header {
  margin-bottom: 5px;
}
</style>